<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import Previous from '@/components/Previous/Previous.vue'
import { Create_Meeting } from '@/stores/MeetingManage/Create a meeting'
import router from "@/router";
import { addMeetingInfo, uploadImg } from "@/api/Meeting";
import { Plus } from '@element-plus/icons-vue'
// 上传文档
import type { UploadProps, UploadUserFile } from 'element-plus'

const meeting = Create_Meeting()
// 返回按钮
const back = () => {
	router.push("/Meeting");
}

interface RuleForm {
	meetingName: string
	trainingArea: string
	meetingMode: string
	meetingDeadline: string
	meetingStartTime: string
	meetingEndTime: string
	meeting_place: string
}
const form = meeting.form
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

// 红星红字判断
const rules = reactive<FormRules<RuleForm>>({
	// 会议名字
	meetingName: [
		{ required: true, message: '请输入会议名称', trigger: 'blur' },
		{ pattern: /^\S{1,10}$/, message: '会议名称必须是1-10位的非空字符', trigger: 'blur' },
	],
	// 培训区域
	trainingArea: [
		{
			required: true,
			message: '请选择培训区域',
			trigger: 'blur',
		},
	],
	// 会议模式
	meetingMode: [
		{
			required: true,
			message: '请选择会议模式',
			trigger: 'blur',
		},
	],
	// 报名截止日期
	meetingDeadline: [
		{
			type: 'date',
			required: true,
			message: '请选择报名截止日期',
			trigger: 'change',
		},
	],
	// 会议开始时间
	meetingStartTime: [
		{
			type: 'date',
			required: true,
			message: '请选择会议开始时间',
			trigger: 'change',
		},
	],
	// 会议结束时间
	meetingEndTime: [
		{
			type: 'date',
			required: true,
			message: '请选择会议结束时间',
			trigger: 'change',
		},
	],
})


// 图片添加
const imgUrl = ref('')
let rawList: any = reactive({})
const onChangeFile = (uploadFile: any) => {
	imgUrl.value = URL.createObjectURL(uploadFile.raw)
	rawList = uploadFile.raw;
}

// 文档添加
// const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {

// }


// 添加属性判断
const addMeeting = async (formEl: FormInstance | undefined) => {
	let fd = new FormData();
	fd.append("image", rawList)
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			uploadImg(fd)
				.then(res => {
					form.meetingResourceDtoList[0].resourceName = rawList.name
					form.meetingResourceDtoList[0].resourceType = rawList.type
					form.meetingResourceDtoList[0].resourceUrl = res.data.data
					addMeetingInfo(form)
						.then((res: any) => {
							console.log(res);

							if (res.data.code === 0) {
								alert('添加成功')
								router.push({ path: "/Meeting" })
							} else {
								alert('添加失败')
							}
						})
				})
		} else {
			alert('信息未填写完全')
		}
	})
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
	value: `${idx + 1}`,
	label: `${idx + 1}`,
}))

const isHoliday = ({ dayjs }: any) => {
	return dayjs.format('YYYY-MM-DD')
}




</script>

<template>
	<div style="width: 80vw; height: 100vh;">
		<Previous @click="back"></Previous>
		<el-form ref="ruleFormRef" :model="meeting.form" :rules="rules" label-width="120px" class="demo-ruleForm"
			:size="formSize" status-icon>
			<el-form-item label="会议名称：" prop="meetingName">
				<el-input v-model="form.meetingName" placeholder="请输入会议名称" style="width: 560px" />
			</el-form-item>

			<div class="information">
				<div>
					<el-form-item label="培训区域" prop="trainingArea">
						<el-select v-model="form.trainingArea" placeholder="选择区域">
							<el-option v-for="item in meeting.form.area" :key="item.area_num" :value="item.training_area" />
						</el-select>
					</el-form-item>
					<el-form-item label="报名截止日期" prop="meetingDeadline">
						<div class="demo-date-picker">
							<el-date-picker v-model="form.meetingDeadline" type="date" placeholder="Pick a day"
								format="YYYY/MM/DD" value-format="YYYY-MM-DD" id="a">
								<template #default="cell">
									<div class="cell" :class="{ current: cell.isCurrent }">
										<span class="text">{{ cell.text }}</span>
										<span v-if="isHoliday(cell)" class="holiday" />
									</div>
								</template>
							</el-date-picker>
						</div>
					</el-form-item>
					<el-form-item label="会议开始时间" prop="meetingStartTime">
						<div class="example-basic">
							<el-time-picker v-model="form.meetingStartTime" arrow-control placeholder="选择会议开始时间" />
						</div>
					</el-form-item>
				</div>
				<div>
					<el-form-item label="会议模式" prop="meetingMode">
						<el-select v-model="form.meetingMode" placeholder="选择模式" style="width: 220px">
							<el-option label="线上" value="线上" />
							<el-option label="线下" value="线下" />
						</el-select>
					</el-form-item>
					<el-form-item label="最多报名人数">
						<el-input-number v-model="form.maximumPeopleNumber" class="mx-4" :min="1" :max="10"
							controls-position="right" style="width: 220px" />
					</el-form-item>
					<el-form-item label="会议结束时间" prop="meetingEndTime">
						<div class="example-basic">
							<el-time-picker v-model="form.meetingEndTime" arrow-control placeholder="选择会议结束时间" />
						</div>
					</el-form-item>
				</div>
			</div>

			<el-form-item label="会议地址：">
				<el-input v-model="form.meetingPlace" placeholder="请输入会议地址" style="width: 560px" />
			</el-form-item>
			<el-form-item label="宾馆住宿情况：">
				<el-input v-model="form.meetingHotel" placeholder="宾馆住宿情况" style="width: 560px" />
			</el-form-item>

			<el-form-item label="会议进程">
				<div class="mt-4">
					<el-input v-model="form.meetingAgenda" placeholder="会议详情" class="input-with-select"
						style="width: 560px">
						<template #append>
							<el-select v-model="form.speaker" placeholder="主讲人" style="width: 115px">
								<el-option label="张三" value="1" />
								<el-option label="李四" value="2" />
								<el-option label="王五" value="3" />
							</el-select>
						</template>
					</el-input>
				</div>
			</el-form-item>

			<el-form-item label="上传图片">
				<el-upload class="avatar-uploader" action="http://47.109.30.198:8081/oss/image/image"
					:show-file-list="false" auto-upload="false" :on-change="onChangeFile">
					<img v-if="imgUrl" :src="imgUrl" class="avatar" />
					<el-icon v-else class="avatar-uploader-icon">
						<Plus />
					</el-icon>
				</el-upload>
			</el-form-item>

			<!-- <el-form-item label="上传文档">
					<el-upload class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
						:on-change="handleChange" auto-upload="false" :show-file-list="false">
						<el-button type="primary">Click to upload</el-button>
						<template #tip>
							<div class="el-upload__tip">
								jpg/png files with a size less than 500kb
							</div>
						</template>
					</el-upload>
				</el-form-item> -->

			<el-form-item class="submit">
				<el-button type="primary" @click="addMeeting(ruleFormRef)">
					添加
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
  
<style scoped>
.example-basic .el-date-editor {
	margin: 8px;
}

.information {
	display: flex;
}

.submit {
	margin-left: 16%;
}

.input-with-select .el-input-group__prepend {
	background-color: var(--el-fill-color-blank);
}

/* 上传图标 */
.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>